<template>
  <div class="category">
    <div class="wrapper" ref="wrapper">
      <ul class="content">
        <button @click="btnClick">anniu</button>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
        <li>51</li>
        <li>52</li>
        <li>53</li>
        <li>54</li>
        <li>55</li>
        <li>56</li>
        <li>57</li>
        <li>58</li>
        <li>59</li>
        <li>60</li>
        <li>61</li>
        <li>62</li>
        <li>63</li>
        <li>64</li>
        <li>65</li>
        <li>66</li>
        <li>67</li>
        <li>68</li>
        <li>69</li>
        <li>70</li>
        <li>71</li>
        <li>72</li>
        <li>73</li>
        <li>74</li>
        <li>75</li>
        <li>76</li>
        <li>77</li>
        <li>78</li>
        <li>79</li>
        <li>80</li>
        <li>81</li>
        <li>82</li>
        <li>83</li>
        <li>84</li>
        <li>85</li>
        <li>86</li>
        <li>87</li>
        <li>88</li>
        <li>89</li>
        <li>90</li>
        <li>91</li>
        <li>92</li>
        <li>93</li>
        <li>94</li>
        <li>95</li>
        <li>96</li>
        <li>97</li>
        <li>98</li>
        <li>99</li>
        <li>100</li>
      </ul>
    </div>
  </div>
</template>
  
<script>
import BScroll from "better-scroll";
export default {
  name: "Category",
  data() {
    return {
      scroll:null
    };
  },
  methods: {
    btnClick(){
      console.log(100)
    }
  },
  mounted() {
   let scroll= new BScroll(this.$refs.wrapper,{
     probeType:1,//探测类型: 2实时侦查滚动位置，惯性滚动不侦查 3实时侦查，惯性滚动也侦查
     click:true, // better-scroll 默认false会阻止浏览器的原生 click 事件
     pullUpLoad:true, //pullUpLoad做上拉加载功能(手指上滑)，默认为 false 配合pullingUp事件
   })
   scroll.on('scroll',(position)=>{

    //  if(position.y<-100){
    //    scroll.on('pullingUp',()=>{
    //      console.log('1111111111')
    //    })
    //  }
     console.log(position) //postion{x:number,y:number}
   })
  //  在一次上拉加载的动作后，这个时机一般用来去后端请求数据
   scroll.on('pullingUp',()=>{
     console.log('aaaaaa')
    //  当上拉加载数据加载完毕后，需要调用此方法告诉 better-scroll 数据已加载。
     scroll.finishPullUp()
   })
  },
};
</script>
 
<style lang="less" scoped>
.wrapper {
  height: 200px;
  background: darkcyan;
  overflow: hidden;
  .content {
    li {
      height: 20px;
      text-align: center;
    }
  }
}
</style>
  